import React, { Component } from 'react'

/** 引入redux 消费链接 */
import {connect} from 'react-redux'

/** 引入redux action方法 */
import { getCityList, getCitySyncList } from '../../action/homeAct'

class HomeIndex extends Component {

    componentDidMount() {
        // this.getPageCity()
    }

    /** 页面上请求数据，不用redux 的异步Action缓存数据 */
    getPageCity() {
        let result = {
            code: 200,
             message: '',
             data: [
                {label: '四川', value: 'sichuang'},
                {label: '陕西', value: 'shanxi'},
                {label: '重庆', value: '重庆'}
             ]
        }
        this.props.dispatch(getCitySyncList(result.data))
    }

    render() {
        console.log(this.props)
        // let list = this.props.home.cityList
        let list = this.props.cityList
        return (
            <div>
                Home Index
                {
                    list.map(it => {
                        return <div key={it.label}>{it.label}</div>
                    })
                }
                <div>
                    <button onClick={
                        () => {
                            // 这是没有映射dispatch的使用方法
                            // this.props.dispatch(getCityList())
                            // 页面定义了映射dispatch方法的使用
                            this.props.getList()
                        }
                    }>更新数据</button>
                </div>
            </div>
        )
    }
}

/** 映射redux 中的state 到页面的props */
const mapStateToProps = storeState => {
    // return {
    //     home: storeState.Home
    // }
    return {
        ...storeState.Home
    }
}

/** 映射dispatch 到props 中 */
const mapDispatch = dispatch => {
    return {
        getList: () => {
            dispatch(getCityList())
        }
    }
}

/**
 * 如果在这里实现了dispatch的映射
 * 在页面上使用不能直接使用默认挂载在props上的dispatch
 * 需要使用在马屁Dispatch中定义的方法
 */
export default connect(mapStateToProps, mapDispatch)(HomeIndex)



// 是装饰器
// @connect(mapStateToProps)
// class HomeIndex extends Component {
//     render() {
//         console.log(this.props)
//         // let list = this.props.home.cityList
//         let list = this.props.cityList
//         return (
//             <div>
//                 Home Index
//                 {
//                     list.map(it => {
//                         return <div key={it.label}>{it.label}</div>
//                     })
//                 }
//                 <div>
//                     <button onClick={
//                         () => {
//                             this.props.dispatch(getCityList())
//                         }
//                     }>更新数据</button>
//                 </div>
//             </div>
//         )
//     }
// }
// export default HomeIndex